<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="HttpHead">
	<link rel="stylesheet" href="silk-bullets-sprite.css" type="text/css" />
	<link rel="stylesheet" href="silk-sprite.css" type="text/css" />
	<style type="text/css">
		.icon
		{
			width: 240px	;
			white-space: nowrap;
			display: inline-block;
			border-left: solid 1px #C5DBEC;
			padding-left: 16px;
			margin-right: 16px;
		}
		input[type='text']
		{
			border: 0; padding: 0;
			width: 200px;
		}
		.icon input
		{
			color: #CCC;
		}			
	</style>
</head>
<body>
<h1>Silk Icon Sprites</h1>

<p>See <a href="http://xheo.com/silk/using-the-silk-icon-sprite">Using the Silk Icon Sprite</a> for details.</p>

<div class="icon"><span class="ui-silk ui-silk-accept" title="ui-silk-accept"></span> <input type="text" value=".ui-silk-accept" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-add" title="ui-silk-add"></span> <input type="text" value=".ui-silk-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-application-delete" title="ui-silk-application-delete"></span> <input type="text" value=".ui-silk-application-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-arrow-down" title="ui-silk-arrow-down"></span> <input type="text" value=".ui-silk-arrow-down" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-arrow-left" title="ui-silk-arrow-left"></span> <input type="text" value=".ui-silk-arrow-left" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-arrow-refresh" title="ui-silk-arrow-refresh"></span> <input type="text" value=".ui-silk-arrow-refresh" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-arrow-right" title="ui-silk-arrow-right"></span> <input type="text" value=".ui-silk-arrow-right" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-arrow-up" title="ui-silk-arrow-up"></span> <input type="text" value=".ui-silk-arrow-up" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-book" title="ui-silk-book"></span> <input type="text" value=".ui-silk-book" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-book-add" title="ui-silk-book-add"></span> <input type="text" value=".ui-silk-book-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-book-delete" title="ui-silk-book-delete"></span> <input type="text" value=".ui-silk-book-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-book-edit" title="ui-silk-book-edit"></span> <input type="text" value=".ui-silk-book-edit" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-book-error" title="ui-silk-book-error"></span> <input type="text" value=".ui-silk-book-error" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-bullet-delete" title="ui-silk-bullet-delete"></span> <input type="text" value=".ui-silk-bullet-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-cancel" title="ui-silk-cancel"></span> <input type="text" value=".ui-silk-cancel" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-delete" title="ui-silk-delete"></span> <input type="text" value=".ui-silk-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email" title="ui-silk-email"></span> <input type="text" value=".ui-silk-email" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email-add" title="ui-silk-email-add"></span> <input type="text" value=".ui-silk-email-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email-attach" title="ui-silk-email-attach"></span> <input type="text" value=".ui-silk-email-attach" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email-delete" title="ui-silk-email-delete"></span> <input type="text" value=".ui-silk-email-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email-edit" title="ui-silk-email-edit"></span> <input type="text" value=".ui-silk-email-edit" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-email-open" title="ui-silk-email-open"></span> <input type="text" value=".ui-silk-email-open" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-flag-blue" title="ui-silk-flag-blue"></span> <input type="text" value=".ui-silk-flag-blue" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-flag-red" title="ui-silk-flag-red"></span> <input type="text" value=".ui-silk-flag-red" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-page" title="ui-silk-page"></span> <input type="text" value=".ui-silk-page" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-page-add" title="ui-silk-page-add"></span> <input type="text" value=".ui-silk-page-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-page-delete" title="ui-silk-page-delete"></span> <input type="text" value=".ui-silk-page-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-page-edit" title="ui-silk-page-edit"></span> <input type="text" value=".ui-silk-page-edit" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-pencil" title="ui-silk-pencil"></span> <input type="text" value=".ui-silk-pencil" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-pencil-add" title="ui-silk-pencil-add"></span> <input type="text" value=".ui-silk-pencil-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-pencil-delete" title="ui-silk-pencil-delete"></span> <input type="text" value=".ui-silk-pencil-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-thumb-down" title="ui-silk-thumb-down"></span> <input type="text" value=".ui-silk-thumb-down" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-thumb-up" title="ui-silk-thumb-up"></span> <input type="text" value=".ui-silk-thumb-up" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-user" title="ui-silk-user"></span> <input type="text" value=".ui-silk-user" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-user-add" title="ui-silk-user-add"></span> <input type="text" value=".ui-silk-user-add" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-user-delete" title="ui-silk-user-delete"></span> <input type="text" value=".ui-silk-user-delete" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-user-edit" title="ui-silk-user-edit"></span> <input type="text" value=".ui-silk-user-edit" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-wrench" title="ui-silk-wrench"></span> <input type="text" value=".ui-silk-wrench" onclick="this.select();"/></div>
<div class="icon"><span class="ui-silk ui-silk-zoom" title="ui-silk-zoom"></span> <input type="text" value=".ui-silk-zoom" onclick="this.select();"/></div>


<h3>Silk Bullets</h3>
<ul class="ui-silk-bullet ui-silk-bullet-add">
	<li><input type="text" onclick="this.select()" value="ui-bullet-add" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-arrow-bottom">
	<li><input type="text" onclick="this.select()" value="ui-bullet-arrow-bottom" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-arrow-down">
	<li><input type="text" onclick="this.select()" value="ui-bullet-arrow-down" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-arrow-top">
	<li><input type="text" onclick="this.select()" value="ui-bullet-arrow-top" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-arrow-up">
	<li><input type="text" onclick="this.select()" value="ui-bullet-arrow-up" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-black">
	<li><input type="text" onclick="this.select()" value="ui-bullet-black" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-blue">
	<li><input type="text" onclick="this.select()" value="ui-bullet-blue" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-delete">
	<li><input type="text" onclick="this.select()" value="ui-bullet-delete" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-disk">
	<li><input type="text" onclick="this.select()" value="ui-bullet-disk" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-error">
	<li><input type="text" onclick="this.select()" value="ui-bullet-error" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-feed">
	<li><input type="text" onclick="this.select()" value="ui-bullet-feed" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-go">
	<li><input type="text" onclick="this.select()" value="ui-bullet-go" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-green">
	<li><input type="text" onclick="this.select()" value="ui-bullet-green" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-key">
	<li><input type="text" onclick="this.select()" value="ui-bullet-key" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-orange">
	<li><input type="text" onclick="this.select()" value="ui-bullet-orange" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-picture">
	<li><input type="text" onclick="this.select()" value="ui-bullet-picture" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-pink">
	<li><input type="text" onclick="this.select()" value="ui-bullet-pink" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-purple">
	<li><input type="text" onclick="this.select()" value="ui-bullet-purple" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-red">
	<li><input type="text" onclick="this.select()" value="ui-bullet-red" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-star">
	<li><input type="text" onclick="this.select()" value="ui-bullet-star" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-toggle-minus">
	<li><input type="text" onclick="this.select()" value="ui-bullet-minus" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-toggle-plus">
	<li><input type="text" onclick="this.select()" value="ui-bullet-plus" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-white">
	<li><input type="text" onclick="this.select()" value="ui-bullet-white" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-wrench">
	<li><input type="text" onclick="this.select()" value="ui-bullet-wrench" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-yellow">
	<li><input type="text" onclick="this.select()" value="ui-bullet-yellow" /></li>
</ul>

<ul class="ui-silk-bullet ui-silk-bullet-tick">
	<li><input type="text" onclick="this.select()" value="ui-bullet-tick" /></li>
</ul>





</body>
</html>